<template>
	<view class="follow">
		<view class="follow-tab">
			<view class="follow-tab__box">
				<view v-for="(item, index) in followTabList" :key='item.name' @click="handlemy(item,index)" :class="{active:index===activeIndex}" class="follow-tab-item">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="follow-list">
			<swiper class="follow-list__swiper" :current="activeIndex" @change="changeswiper">
				<swiper-item>
					<list-scroll  class="swiper-item">
						<list-author :item="item" :key="item._id" v-for="item in authorList"></list-author>
					</list-scroll>
				</swiper-item>
				<swiper-item>
					<list-scroll >
						<list-card v-for="item in articleList" :mode="item.mode" :key="item.id" :data="item"/>
						<uni-load-more v-if="articleList.length === 0 || articleList.length > 7" :status="loading"></uni-load-more>
					</list-scroll>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item"><my-404></my-404></view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				articleList:[],
				activeIndex:1,
				authorList:[],
				loading:'loading',
				followTabList:[
					{name:'关注的作者'},
					{name:'收藏的文章'},
					{name:'加入的团队'},
				]
			}
		},
		onLoad() {
			this.get_follow()
			this.get_author()
			uni.$on("up_likes_detail",()=>{
					this.get_follow()
			})
			uni.$on('updataLike',()=>{
				this.get_follow()
			})
			uni.$on("updataFollow",()=>{
				this.get_author()
			})
		},
		computed: {
			...mapState(['user_id'])
		},
		methods:{
			handlemy(item,index){
				this.activeIndex = index
				console.log(item,index);
			},
			changeswiper(e){
				const {current} = e.detail
				this.activeIndex = current
				if(current === 0){
				}
				// console.log(this.tabbarList[current]);
				// console.log(e);
			},
			async get_author(){
				let authorList = await this.$api.get_author({
					user_id: this.user_id
				})
				if (!authorList) return false;
				this.authorList = authorList
				// console.log(articleList);
			},
			async get_follow(){
				let articleList = await this.$api.get_follow({
					user_id: this.user_id
				})
				if (!articleList) return false;
				this.articleList = articleList
				// console.log(articleList);
			},
		}
	}
</script>

<style scoped lang="scss">
.follow { 
	box-sizing: border-box;
	height: 100%;
	display: flex;
	flex-direction: column;
	flex: 1;
	color: #666;
	// font-weight: bold;
	.follow-tab{
	box-sizing: border-box;
		width: 100%;
		padding: 10px 0;
		border-bottom: 1px solid #ddd;
		.follow-tab__box{
			box-sizing: border-box;
			display: flex;
			justify-content: space-around;
			.follow-tab-item{
				// width: 100%;
				height: 100%;
			}
		}
	}
	.follow-list{
		flex:1;
		.follow-list__swiper{
			height: 100%;
			.swiper-item{
				height: 100%;
			}
		}
	}
	.active{
		color: #333;
		position: relative;
		font-weight: bold;
		&::before{
			content: '';
			position: absolute;
			bottom: -11px;
			// left: 0;
			height: 2px;
			width: 100%;
			background-color: #333;
		}
	}
}
</style>
